import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';
import PorpTypes from 'prop-types'
import fontsize from '../../../configs/fontsize';

export default class TimeTable extends React.Component {
  static propsTypes={
    schedule: {
      timeArr: PorpTypes.array,
      startDate: PorpTypes.string
    }
  }
  static defaultProps={
    schedule: {
      timeArr: [],
      startDate: ''
    }
  }
  render() {
    let timeSchedule = []
    let timeLine = []
    // let lineNum = parseInt(this.props.schedule.timeArr.length / 4)
    this.props.schedule.timeArr.forEach((item, index)=>{
      if (index + 1 > this.props.schedule.timeArr.length - this.props.schedule.timeArr.length % 4) {
        timeLine.push(<Text key={index + 'time'} style={[fontsize.fontsize40, styles.timeText, { marginRight: px2dp(86) }]}>{item}</Text>)
      } else {
        timeLine.push(<Text key={index + 'time'} style={[fontsize.fontsize40, styles.timeText]}>{item}</Text>)
      }
      if ((index + 1) % 4 === 0) {
        timeSchedule.push(<View key={(index + 1) / 4 + 'timeline'} style={[flexStyle.flexH, flexStyle.flexHsb, flexStyle.flexVc, { height: px2dp(116), borderStyle: 'dotted', borderBottomWidth: px2dp(1) }]}>{timeLine}</View>)
        timeLine = []
      }
      if (index === this.props.schedule.timeArr.length - 1 && this.props.schedule.timeArr.length % 4 > 0) {
        timeSchedule.push(<View key={(index + 1) / 4 + 'timeline'} style={[flexStyle.flexH, flexStyle.flexVc, { height: px2dp(116) }]}>{timeLine}</View>)
      }
    })
    return (
      <View style={styles.wrapper}>
        <View style={[styles.title, flexStyle.flexH, flexStyle.flexHsb, flexStyle.flexVc]}>
          <Text>发车时刻表</Text>
          <Text>{this.props.schedule.startDate}</Text>
        </View>
        <View style={[flexStyle.flexV]}>
          {timeSchedule}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    backgroundColor: '#FFFFFF',
    paddingHorizontal: px2dp(30)
  },
  title: {
    height: px2dp(82),
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#EEEEEE'
  },
  timeText: {
    color: '#333333',
    fontWeight: 'bold'
  }
})